<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 500px;
				height: 500px;
				border: 1px solid yellowgreen;
				margin:auto;
				position: relative;
				text-align: center;
				outline: ridge;
				outline-color: palegreen;
				line-height:250px;
				font-family: "first";
			}
			@font-face {
				font-family:"first";
				src: url("../../fonts/MZDZT_0.TTF");
			}
			#div1{
				position:absolute;
				width: 100px;
				height: 100px;
				border-radius: 50%;
				text-align: center;
				line-height: 100px;
				text-shadow: 0 0 5px red;
				color: palegreen;
				background-color:orange;
				animation: move 10s linear 0.5s infinite normal running}
			@keyframes move{
				0%{
					left: 0;
					top: 0;
				}
				25%{
					left: 400px;
					top: 0;
				}
				50%{
					left: 400px;
					top: 400px;
				}
				75%{
					left: 0;
					top: 400px;
				}
				100%{
					left: 0;
					top: 0;
				}
			}
			/*#box:hover div{
				animation-play-state:running;
			}*/
		</style>
	</head>

	<body>
		<div id="box">
			<div id="div1">
				如何平静
			</div>
			<p>两弯似蹙非蹙笼烟眉，一双似喜非喜含情目</p>
			<p>闲静似娇花照水，行动如弱柳扶风</p>
		</div>
	</body>

</html>